// 活动区首页
<template>
	<view class="container" style="background-image: url('../../pages/center/lineBg.png');">
		<!-- <HomeNavbar :title="page.title" searchType="box" :theme="scrollTop > 200 ? 'white' : ''"></HomeNavbar> -->

		<!-- <Banner :list="banner" style="height: 640rpx;" class="banner-c"></Banner> -->

		<!-- 签到 :refreshCounter表示刷新计数器，:getNextPageCounter表示获取下一页计数器，page表示当前页数，theme表示主题 -->
		<!-- <PageRender :refreshCounter="refreshCounter" :getNextPageCounter="getNextPageCounter"  :page="page" theme="default"></PageRender> -->

		<!-- <FloatBtn url="/pages/myActivity/index" :isAnimated="false" src="https://bus-cdn.hquesoft.com/box/activity-float-btn.png"></FloatBtn> -->
		<view class="title">
			<view class="" style="width: 650rpx;text-align: center;">
				抽赏
			</view>
			<view class="" style="width: 45rpx;height: 45rpx;" @click="toranking()">
				<image src="../../static/ranking.png" mode="" style="width: 45rpx;height: 45rpx;"></image>
			</view>

		</view>
		<!-- tab栏切换 -->
		<view class="index">
			<view class="header">

				<p v-for="(item, index) in headList" :key="index" @click="changeTab(index)"
					:class="{ active: activeTab === index }">{{ item }}</p>
			</view>
			<view v-if="activeTab === 0">
				<view class="box">
					<view class="box_item" :class="item.id===flag?'active':''" v-for="(item,index) in data"
						:key='item.id' @click="item.id==0?start():''">
						{{item.name}}
					</view>
				</view>
				<view class="cont" style="text-align: center;color: white;">
					次数: {{lotteryNumber}}
				</view>
			</view>

			<view v-if="activeTab === 1">
				<view class="item-container" v-for="(item, index) in personalRewards" :key="index" >
					<view class="left-content">
						<!-- 首页镂空图片 -->
						<image :src="item.thumb" mode=""
							style="width: 300rpx;height: 320rpx;"></image>
					</view>
					<view class="right-content">
						<view class="status">

						</view>
						<view class="title1">{{item.name}}</view>
						<view class="bottom" style="display: inline-block;">
							<view class="immide" @click="toboxDetails(item.id)">
								<view class="left">
									<view class="price-c">
										￥{{item.price}}
									</view>
								</view>
								<!-- <image src="../../static/manghe/b7f8498be7d2ad7eea9c33b0de1bd08c.gif" mode=""></image> -->
							</view>
							<view class="small">
								<view v-for="(icon, iconIndex) in item.boxSkuVo" :key="iconIndex">
									<image :src="icon.detailImages" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="activeTab === 2">
				<view class="item-container" v-for="(item, index) in goodsList" :key="index">
					<view class="left-content">
						<!-- 首页镂空图片 -->
						<image :src="item.thumb" mode="" style="width: 300rpx;height: 320rpx;"></image>
					</view>
					<view class="right-content">
						<view class="status">

						</view>
						<view class="title1">{{item.name}}</view>
						<view class="bottom" style="display: inline-block;">
							<view class="immide" @click="toDatails(item.id)">
								<view class="left">
									<view class="price-c">
										￥{{ item.price }}
										<!-- <PriceDisplay>价格</PriceDisplay> -->
									</view>
								</view>
								<!-- <image src="../../static/manghe/b7f8498be7d2ad7eea9c33b0de1bd08c.gif" mode=""></image> -->
							</view>
							<view class="small">
								<view v-for="(icon, iconIndex) in item.boxSkuVo" :key="iconIndex">
									<image :src="icon.detailImages" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="activeTab === 3" v-for="(item, index) in yifanshangList" :key="index">
				<view class="item-container">
					<view class="left-content">
						<!-- 首页镂空图片（死的） -->
						<image :src="item.thumb" mode=""
							style="width: 300rpx;height: 320rpx;"></image>
					</view>
					<view class="right-content">
						<view class="status">

						</view>
						<view class="title1">{{item.name}}</view>
						<view class="bottom" style="display: inline-block;">
							<view class="immide" @click="toyifanshang(item.id)">
								<view class="left">

									<view class="price-c">
										￥{{item.price}}
									</view>
								</view>
								<!-- <image src="../../static/manghe/b7f8498be7d2ad7eea9c33b0de1bd08c.gif" mode=""></image> -->
							</view>
							<view class="small">
								<view v-for="(icon, iconIndex) in iconList" :key="iconIndex">
									<image :src="icon" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>

		</view>
	</view>
</template>

<script>
	import {
		getRandomNum_AB,
		GL
	} from '../../utils/onemoney.js'
	import {
		boxAll,
		boxList,
		yifangshi,
	} from "@/api/blind.js"
	export default {
		components: {},
		data() {
			return {
				data: [{
						id: 1,
						name: ''
					},
					{
						id: 2,
						name: ''
					},
					{
						id: 3,
						name: ''
					},
					{
						id: 8,
						name: ''
					},
					{
						id: 4,
						name: ''
					},
					{
						id: 7,
						name: ''
					},
					{
						id: 6,
						name: ''
					},
					{
						id: 5,
						name: ''
					}
				],
				flag: 0, //中奖的编号
				time: 0, //旋转的值 
				isStart: false, //是否开始
				lotteryNumber: 100, //抽奖次数
				password: '',
				passwordInfo: 0,
				// scrollTop: 0,
				// refreshCounter: 0,
				// getNextPageCounter: 0,
				activeTab: 0,
				headList: ["一元夺宝", "个人赏", "无限赏", "一番赏", ],
				iconList: [],
				// 无限赏列表
				goodsList: [],
				// 个人赏列表
				personalRewards:[],
				// 一番赏列表
				yifanshangList:[],
			}
		},
		// computed: {
		// 	// page() {
		// 	// 	return this.$store.getters.setting.activity_home
		// 	// }
		// },
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			}
		},
		watch: {},
		onLoad() {
			this.data.splice(4, 0, {
				id: 0,
				name: '开始'
			})
			let arr = []
			arr.forEach((item, index) => {
				this.data.forEach(item1 => {
					if (item1.id === index + 1) {
						return item1.name = item
					}
				})
			})
			console.log(this.data);
			this.passwordInfo = uni.getStorageSync('passwordInfo') || 56756
			// this.$visitor.record('activity_index');
		},
		// onPullDownRefresh() {
		// 	// this.$showPullRefresh().then(res => {
		// 	// 	this.refreshCounter++
		// 	// })
		// },
		mounted() {
			// this.$refs.mySwiper = this.$refs['mySwiperRef'];
			this.changeTab(0)
		},
		onShow() {},
		methods: {
			changeTab(index) {
				this.activeTab = index;
				if(this.activeTab == 1){
					boxList().then(res => {
						this.personalRewards = res.data.list;
					});
				} else if(this.activeTab == 2){
					boxAll({
						type: this.activeTab
					}).then(res => {
						this.goodsList = res.data.list;
					});
				}else if(this.activeTab == 3){
					yifangshi().then(res => {
						this.yifanshangList = res.data.list;
					});
				}
				
			},
			// 跳转详情
			toDatails(id) {
				uni.navigateTo({
					url: '../blind/index/details/details?boxId=' + id,
				});
			},
			//跳转个人赏详情
			toboxDetails(id){
				uni.navigateTo({
					url: '/pages/peopleDetails/peopleDetails?boxId=' + id,
				});
			},
			toyifanshang(id){
				uni.navigateTo({
					url: '/pages/yifanshang/detail?boxId=' + id
				});
			},
			toranking() {
				uni.navigateTo({
					url: "/pages/ranking/index"
				})
			},
			start() {
				if (this.isStart) return
				if (this.lotteryNumber <= 0) {
					uni.showToast({
						title: '抽奖次数不足，请充值•︠ˍ•︡',
						icon: 'none',
						duration: 2000
					});
					return
				}
				this.lotteryNumber--
				this.isStart = true
				// let flag = getRandomNum_AB(1,8)
				// 中奖概率构造函数
				let gl = new GL({
					min: 1,
					max: 9,
					fenpei: new Map([
						[1, 0.25],
						[3, 0.25],
						[5, 0.25],
						[7, 0.25],
					])
				});
				let flag = gl.random() //生成随机数
				this.time = 4900 + (50 * flag)
				// console.log(this.time);	
				this.flag = 1
				this.fn(100)
			},
			clickBtn() {
				let date = new Date()
				let HH = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
				let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
				console.log(HH + '' + mm);
				if (this.password == HH + '' + mm) {
					uni.showToast({
						title: '恭喜你,获得3次抽奖机会',
						icon: 'none',
						duration: 2000
					});
					// const val = this.passwordInfo + 1234
					// this.passwordInfo=val
					// uni.setStorageSync('passwordInfo', val);
					this.lotteryNumber += 3
				} else {
					uni.showToast({
						title: '无效的口令,请重试',
						icon: 'none',
						duration: 2000
					});
				}
				this.password = ''
			},
			fn() {
				let time = this.time
				let n = 50
				let Timeout = () => {
					setTimeout(() => {
						time = time - n
						if (time <= 4000 && time > 3000) {
							n = 100
						} else if (time <= 3000 && time > 2500) {
							n = 500
						} else if (time <= 2500 && time > 2000) {
							n = 800
						} else if (time <= 2000) {
							n = 1000
						}
						if (time <= 0) {
							if (this.flag % 2) {
								let title = ''
								switch (this.flag) {
									case 1:
										title = '100元'
										break;
									case 3:
										title = '50元'
										break;
									case 5:
										title = '30元'
										break;
									default:
										title = '5元'
										break;
								}
								uni.showToast({
									title: `恭喜您获得给SYN${title}的机会`,
									icon: 'none',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: '很遗憾没有中奖',
									icon: 'none',
									duration: 2000
								});
							}
							this.isStart = false
							return false
						}
						if (this.flag < 8) {
							this.flag++
						} else {
							this.flag = 1
						}
						Timeout()
					}, n)
				}
				Timeout()

			}
		},
		onReachBottom() {
			// this.getNextPageCounter++
			// console.log('reach bottom')
		},
		onPageScroll(e) {
			// this.scrollTop = e.scrollTop
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #151515;
	}

	.title {
		width: 90%;
		/* height: 80rpx; */
		font-size: 50rpx;
		margin-left: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		/* color: white; */
		font-weight: 500;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
	}

	.header {
		margin-top: 30rpx;
		display: flex;
		width: 100%;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 0 10rpx;

		p {
			border: 3rpx solid #565656;
			box-sizing: border-box;
			color: #565656;
			width: 150rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-weight: 100;
			font-size: 30rpx;
			text-align: center;
			border-radius: 5rpx;
			background-image: -webkit-linear-gradient(-45deg, rgb(32, 33, 33), rgb(3, 3, 3));
		}

		.active {
			color: rgb(240, 206, 173);
			border: 3rpx solid rgb(240, 206, 173);
			background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
		}
	}

	.small {
		width: 382rpx;
		height: 100rpx;
		white-space: nowrap;
		overflow-x: auto;
		display: flex;
		margin-top: 20rpx;

		view {
			width: 100rpx;
			height: 80rpx;
			flex: 0 0 auto;
			border: 1rpx solid white;
			margin-right: 10rpx;
			border-radius: 10rpx;
			text-align: center;

			image {
				width: 80%;
				height: 80%;
				margin-top: 10rpx;
			}
		}
	}

	.immide {
		width: 340rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin-top: 17rpx;
		box-shadow: 0px 1px 5px 0px rgba(255, 255, 255, 0.4);

		image {
			width: 200rpx;
			height: 80rpx;
			margin-left: -2rpx;
		}
	}

	.left {
		width: 150rpx;
		height: 80rpx;
		background: rgba(18, 25, 42);
	}

	.item-container {
		width: 95%;
		height: 320rpx;
		background: url("../../static/manghe/0cade2c2407a4ddd17e5936099381e72.png") no-repeat;
		background-size: cover;
		box-shadow: 0px 4px 16px 0px rgba(226, 222, 204, 0.6);
		margin: 50rpx 20rpx 20rpx 20rpx;
		position: relative;
		display: flex;
		z-index: 999;

		border-top: 1rpx solid #fafafa;

		/* border: 1px solid red; */
		.left-content {
			position: relative;
			width: 300rpx;
			height: 320rpx;
			flex: 0 0 300rpx;
			/* // border-radius: 30rpx;
			// top: -20rpx; */
			margin: 0rpx 30rpx 0rpx 0rpx;
			overflow: hidden;

			.thumb {
				width: 100%;
				height: 100%;
			}

			.expired-mask {
				width: 100%;
				height: 100%;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				background: rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;

				.mask-icon {
					width: 112rpx;
					height: 84rpx;
				}
			}
		}


		.right-content {
			position: relative;
			flex-grow: 1;

			.status {
				font-size: 24rpx;
				height: 20rpx;
				// border: 1px solid red;
				overflow: hidden;
				padding-right: 20rpx;

				&.working,
				&.pending {
					background: url(@/static/activity/status-bg-working.png);
					background-size: 180rpx 70rpx;
					background-repeat: no-repeat;
					background-position-x: right;
					color: white;
				}

				&.expired {
					color: rgba(153, 153, 153, 1);
					background: url(@/static/activity/status-bg-expired.png);
					background-size: 180rpx 70rpx;
					background-repeat: no-repeat;
					background-position-x: right;
				}

				.text {
					width: 130rpx;
					text-align: center;
					display: block;
					float: right;
					line-height: 56rpx;
					font-weight: 500;
				}
			}

			.title1 {
				font-weight: bold;
				background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				line-height: 40rpx;
				font-size: 30rpx;
				min-height: 60rpx;
				padding-right: 20rpx;

				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.sub-title {
				font-size: 28rpx;
			}

			.time {
				color: #999999;
				font-size: 26rpx;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #999999;
				font-size: 26rpx;
				padding-right: 30rpx;
				width: 100%;
				box-sizing: border-box;
				font-weight: 500;
				flex-wrap: wrap;

				.price-c {
					display: flex;
					align-items: flex-end;
					background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					font-size: 50rpx;
				}

				.lottery-total,
				.city,
				.live-platform {
					height: 36rpx;
					background: #FFFAE8;
					border-radius: 18rpx;
					padding: 0rpx 20rpx;
					box-sizing: border-box;
					line-height: 36rpx;
					color: white;
					font-size: 22rpx;
					font-weight: 500;
					color: #FFCC09;
					// flex: 0 0 110rpx;
					text-align: center;
				}
			}
		}

		&.theme-2 {
			overflow: hidden;
			margin: 30rpx 0rpx 20rpx 0rpx;

			.left-content {

				top: 0rpx;
				height: 100%;
				margin: 0rpx 20rpx 0rpx 0rpx;
				border-radius: 0rpx;
			}
		}

	}


	.box {
		width: 700rpx;
		height: 700rpx;
		margin: 50rpx auto;
		background-color: #151515;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.box_item {
			width: 33%;
			height: 33%;
			// background: url("../../static/0342ea6c318837463b9d21d4877cc95d.png") no-repeat;
			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: center;

			&:nth-child(5) {
				color: #fff;
				// background-image: url("../../static/anniu.png");
				background-size: 60%;
				background-position: 50rpx;
			}
		}

		.active {
			box-sizing: border-box;
			color: rgb(240, 206, 173);
			border: 3rpx solid rgb(240, 206, 173);
			// background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
		}
	}
</style>